<template>
	<view>
		<view class="">globalDataRouter1</view>
		<view class="uni-form-item uni-column">
			<input :value="dataRef.a" class="uni-input" focus placeholder="自动获得焦点" />
		</view>
		<button size="mini" type="default" @click="changeInputVal">改变input的value</button>
		<button size="mini" type="default" @click="emitData">emit globalDataRouter中事件</button>
		<navigator delta="1" open-type="navigateBack" url="/pages/globalDataRouter/globalDataRouter1">
			<button size="mini" type="default">返回1页</button>
		</navigator>
	</view>
</template>

<script setup>
	import {
		onBeforeMount,
		onMounted,
		onBeforeUpdate,
		onUpdated,
		onBeforeUnmount,
		onUnmounted,
		onActivated,
		onDeactivated,
		computed,
		ref
	} from "vue"
	import {onLoad,onReady,onShow,onHide,onUnload,onPageScroll} from "@dcloudio/uni-app";
	const dataRef = ref({
		a: '2222'
	})
	//option为object类型，会序列化上个页面传递的参数
	onLoad((option) => {  
		console.log('globalDataRouter1...onLoad...', option)
		// 路由跳转是 history栈中的页面状态事件还在(redirectTo / switchTab  / reLaunch  )
		uni.$on('globalDataRouter1update',function(data){
			console.log('监听到事件来自globalDataRouter update ，携带参数 msg 为：' + JSON.stringify(data));
			// dataRef.value.a = data.inputVal;
		})
	})
	onReady((option) => {
		console.log('globalDataRouter1...onReady...', option)
	})
	onShow((option) => {
		console.log('globalDataRouter1...onShow...', option)
	})
	onHide((option) => {
		console.log('globalDataRouter1...onHide...', option)
	})
	onUnload((option) => {
		console.log('globalDataRouter1...onUnload...', option)
	})
	let changeInputVal = ()=>{
		dataRef.value.a = dataRef.value.a + '哈哈'
	}
	let emitData = ()=>{
		uni.navigateBack({
			delta:1,
			animationType:'fade-out',
			animationDuration:300,
			success: () => {
				
			},
			fail: () => {
				
			},
			complete: ()=>{
				
			}
		})
	}
	uni.$emit('update',{msg:'页面更新'})
</script>
	
<style lang="scss">
	.uni-form-item{
		padding: 4px 12px;
		background-color: gainsboro;
		margin: 2px;
		border-radius: 6px;
	}
</style>
